<template>
	<view>
		<!-- 多个横向商品 -->
		<template v-if="isList">
			<!-- 两块左右结构 -->
			<view class="order-message-view1 padding-30" v-for="(item,index) in list" :key="index">
				<image class="order-message-image" :src="item.goods_image" mode="widthFix"></image>
				<view class="order-message-right">
					<view class="order-message-title">
						{{item.goods_name}}
					</view>
					<template v-if="item.type == 1">
						<view class="order-message-desc">
							<u-count-down :timestamp="item.goods_desc" bg-color="#FFF0CA" color="#C52B21" separator="zh" separator-size="24"></u-count-down>
						</view>
					</template>
				   <template v-else>
					   <view class="order-message-desc" v-if="item.status11">
					   </view>
					   <view class="order-message-desc" v-else>
					   	{{item.type == 0 ? '已过期':''}}
					   </view>
				   </template>
					<view class="order-message-price">
						<view class="order-price">
							<text style="font-size: 15px;">￥</text>
							    {{item.goods_price}}
						    <text style="font-size: 15px;margin-left: 5rpx;">元</text>
						</view>
						<!-- <view class="order-mu">{{orderInfo.grammage}}g</view> -->
						<template v-if="item.type == 1">
							<view class="order-btn" @click="$emit('goodsClick',item)">{{item.benName}}</view>
						</template>
						<template v-else>
							<view v-if="item.status11" class="order-btn" @click="$emit('goodsClick',item)">{{item.benName}}</view>
							<view v-else class="order-btn1">{{item.benName}}</view>
						</template>
					</view>
				</view>
			</view>
		</template>
		<!-- 三块左右中结构 -->
		<template v-else-if="isThreeViewList">
			<view class="order-message-view1 padding-30" v-for="(item,index) in list" :key="index">
				<image class="order-message-image" :src="item.goods_image" mode="widthFix"></image>
				<view class="order-message-right">
					<view class="order-message-title">
						{{item.goods_name}}
					</view>
					<view class="order-message-desc">{{item.goods_desc}}</view>
				</view>
				<view class="order-message-rightView">
					<view class="order-btn" @click="$emit('goodsClick',item)">{{item.benName}}</view>
				</view>
			</view>
		</template>
		
		<!-- 单个横向商品 -->
		<template v-else>
			<view class="order-message-view1 padding-30">
				<image class="order-message-image" :src="orderInfo.goods_image" mode=""></image>
				<view class="order-message-right">
					<view class="order-message-title">
						{{orderInfo.goods_name}}
					</view>
					<view class="order-message-desc">{{orderInfo.goods_desc}}</view>
					<view class="order-message-price">
						<view class="order-price"><text style="font-size: 15px;">￥</text>{{orderInfo.goods_price}}
						</view>
						<!-- <view class="order-mu">{{orderInfo.grammage}}g</view> -->
						<view class="order-btn" @click="$emit('click')">{{orderInfo.benName}}</view>
					</view>
				</view>
			</view>
		</template>
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script>
	export default {
		props:{
			// 多个商品
			list:Array,
			// 单个商品
			orderInfo:Object,
			// 是否是数组
			isList:false,
			// 是否是金币列表
			isThreeViewList:false
		}
	}
</script>

<style lang="less">
	.order-message-desc{
		font-size: 12px;
		color: #666666;
		// margin: 20rpx 0;
	}
	.order-btn{
		font-size: 13px;
		color: #ffffff;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
		background-color: #C52B21;
		letter-spacing: 2px;
	}
	.order-btn1{
		font-size: 13px;
		color: #999999;
		padding: 10rpx 40rpx;
		border-radius: 10rpx;
		background-color: #f4f4f4;
		letter-spacing: 2px;
	}
	.padding-30{
		padding: 20rpx;
	}
	.paddingx-30{
		padding: 0 30rpx;
	}
	.order-message-view1 {
		display: flex;
		align-items: center;
	    background-color: #FFF0CA;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		.order-message-image {
			width: 138rpx;
			height: 138rpx;
			border-radius: 20rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}
		.order-message-right {
			flex: 1;
			// position: relative;
		}
	
		.order-message-title {
			font-size: 15px;
			color: #333333;
			margin-bottom: 10rpx;
		}
	
		.order-message-price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			// position: absolute;
			// bottom: 0;
			// right: 0;
			.order-price {
				font-size: 14px;
				color: #E83434;
			}
	
			.order-mu {
				font-size: 15px;
				color: #666666;
			}
		}
	}
</style>